/* eslint-disable no-undef */
import "./index.css"
import list from "./data.js"
let ul = document.querySelector('ul');
let loading = document.querySelector('.loading');
let body = document.querySelector('body');
// 从第几个数据开始渲染
let dataIndex = 0;
// 开关状态
let state = 0;
// 首次渲染
render();
// 渲染函数
function render() {
    // 每次渲染8个
    for (let i = 0; i < 8 && dataIndex < list.length; i++) {
        // 给页面渲染数据
        ul.innerHTML += `
    <li>
          <img
            src="${list[dataIndex].pic}"
            alt=""
          />
          <p>活动：${list[dataIndex].name}</p>
          <p>地址：${list[dataIndex].address}</p>
          <p>时间：${list[dataIndex].showTime}</p>
          <p>价格：${list[dataIndex].price}</p>
        </li>`;
        dataIndex++;
    }
}
// 滚动时间
window.addEventListener('scroll', function () {
    // 滚动的距离
    let scrollTop = document.documentElement.scrollTop;
    // 页面的高度
    let pageHeight = body.offsetHeight;
    // 加载数据的条件
    // 1.开关状态为关闭
    // 2.距离底部200px
    // 3.还有数据没有渲染
    if (
        !state &&
        scrollTop + 200 + window.innerHeight >= pageHeight &&
        dataIndex < list.length - 1
    ) {
        // 开关打开
        state = 1;
        loading.classList.add('active');
        // 1s后loading消失，并加载页面
        setTimeout(function () {
            loading.classList.remove('active');
            render();
            // 定时器结束，把开关关闭
            state = 0;
        }, 500);
    }
});
